import { useState } from 'react'

const Demo1 = () => {
  // const [状态名, 改变状态值的函数] = useState(状态默认值)
  // state特点：状态不可变。对于数组或对象需要返回一个全新的对象（新的内存空间）
  let [count, setCount] = useState(1)
  let [user, setUesr] = useState({ name: '晓华', age: 18 })
  let [nums, setNums] = useState([1, 2, 3])

  const handle3 = (number) => {
    const newNums = nums.filter((item) => item !== number)
    setNums(newNums)
  }

  const handle2 = () => {
    setNums([...nums, nums.length + 1])
  }

  const handle1 = () => {
    setUesr({ ...user, name: '小安' })
    console.log(user)
  }

  return (
    <>
      <ul>
        {nums.map((item, index) => (
          <li key={index}>
            {item}
            <span
              onClick={() => {
                handle3(item)
              }}
            >
              删除
            </span>
          </li>
        ))}
      </ul>
      <button onClick={handle2}>添加数字</button>
      <hr />
      <p>{JSON.stringify(user)}</p>
      <p>
        <button onClick={handle1}>改名</button>
      </p>
      <hr />
      <p>count:{count}</p>
      <button
        onClick={() => {
          setCount((count) => {
            return (count += 1)
          })
        }}
      >
        upd
      </button>
    </>
  )
}

export default Demo1
